<template>
  <div class="index">

    <div class="center">
      <left></left>
      <div class="right" ref="right" v-loading="jiazaizhong">
        <top></top>

        <div class="hei10"></div>
        <div class="where" style="background: #fff; padding: 10px 30px; font-size: 14px; color: #595959;">当前位置：分销后台>报表
        </div>
        <div class="hei10"></div>
        <div class="kflex" style="background: rgb(249, 249, 249); position: relative;">
          <!-- <div class="bli">综合看板</div>
          <div class="bli">自营报表</div>
          <div class="bli">分销报表</div>
          <div class="bli">商品分析</div> -->
          <div class="bli bliact" @click="goid('/xinbaobiao')">综合查询</div>
          <div class="bli" @click="goid('/xinbaobiao/yunyingbaobiao')" v-if="shopid == 304676 || shopid == 50481">运营报表</div>
          <!-- <div class="bli">聚焦分析</div> -->

          <div style="position: absolute; right: 10px; top: 0; padding: 20px; color: rgb(42, 67, 255); font-size: 14px; cursor: pointer;" @click="goid('/setup/dingdanlaiyuan/dingdanlaiyuan')">
            <i class="el-icon-s-tools" style="color: rgb(42, 67, 255); margin-right: 5px; "></i>销售渠道划分
          </div>
        </div>
        <div style="padding: 20px 20px 30px 20px;">
          <!-- 滚动条 -->
          <!-- <div style="position: fixed; right: 20px; bottom: -10px; z-index:999; width: calc(100% - 250px);" >
            <gundongtiao ref="gundongtiao" :kuandu="gundongtiaokuandu" v-if="gundongtiaolog && list != ''" @baifenbi="baifenbi"></gundongtiao>
          </div> -->

          <div class="kflex" style="margin-bottom: 20px; position: relative;">
            <div class="kflexc">
              <div class="f1">自定义报表：</div>
              <div class="f2 kflex" style="max-width: 1300px;">
                <el-button size="medium" v-for="item in zidingyilist" :key="item.id" @click="yongzidingyi(item)" :class="navkli == item.id?'zhge':''">{{item.config_name}}</el-button>
              </div>
            </div>
            <div style="position: absolute; right: 10px; top: 0; color: rgb(42, 67, 255); font-size: 14px; cursor: pointer;display: flex;align-items: center;" >
              <el-popover
                placement="bottom"
                width="400"
                trigger="click">
                <div>
                  1、日期检索选择日期跨度小于10天的数据会实时计算，日期超过10天会使用每天一算的数据（次日更新）。
                </div>
                <div>
                  2、接口处获取订单激活情况的查单操作，只查询最近15天的订单，超过15天将不会再更新激活数据
                </div>
                <div slot="reference" style="display: flex;align-items: center;">
                  <el-button  size="medium" type="text"  >数据更新说明</el-button><img style="margin-left: 5px;margin-right: 15px; margin-top: -12px;" src="../../../static/img/wen.png"  alt="">
                </div>
              </el-popover>
              <el-button  size="medium" type="text" @click="xiazai" >下载使用文档</el-button><img src="../../../static/img/down.png" alt="" style="margin-left: 5px;  margin-top: -12px;" >
            </div>
          </div>
          <!-- <div style="color: rgb(123, 134, 153); margin-bottom: 20px;">数据更新时间：2000-11-11</div> -->
          <div class="kflex" style="margin-bottom: 10px;">
            <div class="kflexc">
              <div class="f1">选择统计指标1：</div>
              <div class="f2">
                <el-cascader v-model="all2.zhibiao1" clearable class="zhibiao1x" :options="baobiao" @change="handleChange1"></el-cascader>
              </div>
            </div>
            <div class="kflexc">
              <div class="f1">选择统计指标2：</div>
              <div class="f2">
                <el-cascader v-model="all2.zhibiao2" clearable class="zhibiao2x" :disabled="all2.zhibiao1 == ''" :options="baobiao2" @change="handleChange2"></el-cascader>
              </div>
            </div>
          </div>
          <div style="">
            <div class="kflex">
              <div class="f1" style="line-height:60px;">产品来源筛选：</div>
              <!-- <div class="f2">
                <el-button size="medium" type="primary">选择供应商渠道</el-button>
              </div> -->
              <div class="kflex inp20" style="width: calc(100% - 120px);">

                <div class="f2">
                  <el-select clearable v-model="all.product_sources" @change="change1" filterable multiple collapse-tags   placeholder="选择运营商渠道" :disabled="all.product_source == 'supplier'">
                    <el-option :label="item" :value="item"  v-for="item in qudaolaiyuanlists" :key="item" ></el-option>
                  </el-select>
                </div>

                <div class="f2">
                  <el-select clearable v-model="all.supplier_ids" @change="change2" filterable multiple collapse-tags placeholder="选择上游供应商" :disabled="all.product_source == 'product_source'">
                    <el-option :label="item.name" :value="item.shop_id"  v-for="item in gongyingshanglists" :key="item.shop_id" ></el-option>
                  </el-select>
                </div>

                <div class="f2">
                  <el-select clearable v-model="all.product_ids" @change="change3" filterable multiple collapse-tags  placeholder="选择产品">
                    <el-option :label="item.name + '---' + item.sku" :value="item.id"  v-for="item in prolists" :key="item.id" ></el-option>
                  </el-select>
                </div>

                <div class="f2">
                  <el-select clearable v-model="all.page_ids"  filterable multiple collapse-tags placeholder="选择商品">
                    <el-option :label="item.title + '---' + item.fetch_code" :value="item.id" v-for="item in shoplists" :key="item.id" ></el-option>
                  </el-select>
                </div>

              </div>
            </div>

            <div class="kflex">
              <div class="f1" style="line-height:60px;">销售渠道筛选：</div>
              <div class="kflex inp20" style="width: calc(100% - 120px);">
                <div class="f2">
                  <el-select clearable v-model="all.channel_ids" @change="change4" filterable multiple collapse-tags  placeholder="选择销售渠道" :disabled="all.sale_source == 'merchant'">
                    <el-option :label="item.channel_name" :value="item.id"  v-for="item in qudaolists" :key="item.id" ></el-option>
                  </el-select>
                </div>

                <div class="f2">
                  <el-select clearable v-model="all.sources" @change="getgezhonglist4" filterable multiple collapse-tags  placeholder="选择订单来源" :disabled="all.sale_source == 'merchant' || all.merchant_ids != ''">
                    <el-option :label="item.source_name" :value="item.id"  v-for="item in sourceslists" :key="item.id" ></el-option>
                  </el-select>
                </div>

                <div class="f2">
                  <el-select clearable v-model="all.sub_sources" filterable multiple collapse-tags  placeholder="选择二级来源"  :disabled="all.sale_source == 'merchant'">
                    <el-option :label="item.nick_name" :value="item.nick_name"  v-for="item in erjilists" :key="item.author_id" ></el-option>
                  </el-select>
                </div>

                <div class="f2">
                  <el-select clearable v-model="all.merchant_ids" filterable multiple collapse-tags placeholder="选择分销商"  :disabled="all.sale_source == 'source' || all.sale_source == 'channels' || all.sources != ''">
                    <el-option :label="item.name" :value="item.child_shop_id"  v-for="item in fenxiaoshanglists" :key="item.child_shop_id" ></el-option>
                  </el-select>
                </div>

                <div class="f2"  >
                  <el-select  v-model="all.cm_id" placeholder="选择客户经理" filterable clearable  :disabled="all.sale_source == 'source' || all.sale_source == 'channels'">
                    <el-option :label="item.name" :value="item.id"  v-for="item in kehujinglilists" :key="item.id" ></el-option>
                  </el-select>
                </div>
              </div>

              <!-- <div class="f2">
                <el-select clearable v-model="all.zhibiao2" placeholder="拆单状态">
                  <el-option label="买一送一" value="1"></el-option>
                  <el-option label="拆分订单一" value="1"></el-option>
                  <el-option label="拆分订单二" value="2"></el-option>
                  <el-option label="拆分订单三" value="3"></el-option>
                </el-select>
              </div> -->
            </div>
          </div>
          <div class="kflex" style=" margin-bottom: 20px;">
            <div class="kflexc">
              <div class="f1">订单状态筛选：</div>
              <div class="kflex inp20" style="width: calc(100% - 120px);">
                <div class="f2">
                  <el-select clearable v-model="all.order_status"  placeholder="订单状态">
                    <el-option :label="item.label" :value="item.value" v-for="item in peizhis.order_status1" :key="item.value" ></el-option>
                  </el-select>
                </div>
                <div class="f2">
                  <el-select clearable v-model="all.pay_status"  placeholder="交易状态">
                    <el-option :label="item.label" :value="item.value" v-for="item in peizhis.pay_status" :key="item.value" ></el-option>
                  </el-select>
                </div>
                <div class="f2">
                  <el-select clearable v-model="all.active_status"  placeholder="激活状态">
                    <el-option :label="item.label" :value="item.value" v-for="item in peizhis.active_status" :key="item.value" ></el-option>
                  </el-select>
                </div>

                <div class="f2" v-if="shopid == 304676 || shopid == 50481">
                  <el-select clearable v-model="all.is_virtually"  placeholder="是否引流">
                    <el-option label="非引流" :value="0" ></el-option>
                    <el-option label="引流" :value="1" ></el-option>
                  </el-select>
                </div>

              </div>
            </div>
          </div>
          <div class="kflex" style="margin-bottom: 20px;">
            <div class="kflexc">
              <div class="f1">日期选择：</div>
              <div class="f2">
                <el-button size="medium" @click="timejichange(1)" :class="timeji == 1?'zhge':''">今天</el-button>
              </div>
              <div class="f2">
                <el-button size="medium" @click="timejichange(2)" :class="timeji == 2?'zhge':''">昨天</el-button>
              </div>
              <div class="f2">
                <el-button size="medium" @click="timejichange(3)" :class="timeji == 3?'zhge':''">最近一周</el-button>
              </div>
              <div class="f2">
                <el-button size="medium" @click="timejichange(4)" :class="timeji == 4?'zhge':''">最近30天</el-button>
              </div>
              <div class="f2">
                <!-- <el-date-picker v-model="times" @change="changetimes" value-format="yyyy-MM-dd HH:mm:ss" :clearable="false" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker> -->
                <el-date-picker v-model="times" @change="changetimes" value-format="yyyy-MM-dd HH:mm:ss" :default-time="['00:00:00', '23:59:59']" :clearable="false" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
              </div>
            </div>
          </div>
          <div class="kflex" style="margin-bottom: 20px;">
            <div class="kflexbc" style="width: 100%;">
              <div class="f2">
                <el-button size="medium" type="danger" @click="getshuju()">搜索</el-button>
                <el-button size="medium" class="zhge" type="danger" @click="daochu" >导出当前数据</el-button>
                <el-button size="medium" class="zhge" type="danger" @click="baocunzidingyi">保存当前报表至自定义</el-button>

                <el-button size="medium" class="zhge" type="danger" @click="baocunzidingyi2" v-if="navkli">保存当前修改</el-button>
                <el-button size="medium" type="danger" @click="shanchuzidingyi" v-if="navkli">删除自定报表</el-button>
              </div>
              <div class="f2">
                <el-button size="medium" type="primary" icon="el-icon-setting" @click="tuozhuaishow">设置数据字段</el-button>
              </div>
              <!-- <div class="f2">
                <el-button size="medium" type="primary">导出</el-button>
              </div>
              <div class="f2">
                <el-button size="medium" type="primary">保存自定义</el-button>
              </div> -->
            </div>
          </div>


          <div style="overflow: auto; width: calc(100vw - 260px);" ref="tabs1"  :class="shangqu?'shangqu':''" class="gdt" v-if="shangqu">
            <div class="liebiao"   style="border-left: 1px #eaeaea solid;" :style="{'width':xianshidekuandu}">
              <div class="liebiaoli zhibiao1" v-if="zhibiao1show">{{zhibiao1name}}</div>
              <div style="display: flex;" :style="{'width':xianshidekuandu2}">
                <div class="liebiaoli zhibiao2" v-if="zhibiao2show">{{zhibiao2name}}</div>
                <template v-for="(item,index) in lie">
                        <div class="liebiaoli" v-if="item.xianshima" :key="index">

                          <el-tooltip class="item" effect="dark" :content="item.tex" placement="top-start" v-if="item.tex">
                              <span style="cursor: pointer;">{{item.name}}</span>
                          </el-tooltip>

                          <span style="cursor: pointer;" v-if="!item.tex">{{item.name}}</span>

                          <i class="el-icon-caret-bottom" style="cursor: pointer;" v-if="paixu != item.value+'1' && paixu != item.value+'2'"  @click="paixug(item.value,1)"></i>
                          <i class="el-icon-caret-bottom" style="cursor: pointer;" :class="paixu==item.value+'1'?'lan':''"  v-if="paixu == item.value+'1'"  @click="paixug(item.value,2)"></i>
                          <i class="el-icon-caret-top" style="cursor: pointer;" :class="paixu==item.value+'2'?'lan':''" v-if="paixu==item.value+'2'" @click="paixu = ''"></i>
                        </div>
                </template>
              </div>
            </div>
          </div>

          <div style="background: #fff; width: 100%; overflow: auto; position: relative;  padding: 20px 0;"  class="lieall" ref="tabs">
           <div class="liebiao"   style="border-left: 1px #eaeaea solid;" :style="{'width':xianshidekuandu}">
                         <div class="liebiaoli zhibiao1" v-if="zhibiao1show">{{zhibiao1name}}</div>
                         <div style="display: flex;" :style="{'width':xianshidekuandu2}">
                           <div class="liebiaoli zhibiao2" v-if="zhibiao2show">{{zhibiao2name}}</div>

                           <template v-for="(item,index) in lie">
                                   <div class="liebiaoli" v-if="item.xianshima" :key="index">

                                     <el-tooltip class="item" effect="dark" :content="item.tex" placement="top-start" v-if="item.tex">
                                         <span style="cursor: pointer;">{{item.name}}</span>
                                     </el-tooltip>

                                     <span style="cursor: pointer;" v-if="!item.tex">{{item.name}}</span>

                                     <i class="el-icon-caret-bottom" style="cursor: pointer;" v-if="paixu != item.value+'1' && paixu != item.value+'2'"  @click="paixug(item.value,1)"></i>
                                     <i class="el-icon-caret-bottom" style="cursor: pointer;" :class="paixu==item.value+'1'?'lan':''"  v-if="paixu == item.value+'1'"  @click="paixug(item.value,2)"></i>
                                     <i class="el-icon-caret-top" style="cursor: pointer;" :class="paixu==item.value+'2'?'lan':''" v-if="paixu==item.value+'2'" @click="paixu = ''"></i>
                                   </div>
                           </template>

           <!--
                           <div class="liebiaoli" v-for="(item,index) in lie" :key="index">
                             {{item.name}}

                             <i class="el-icon-caret-bottom" style="cursor: pointer;" v-if="paixu != item.value+'1' && paixu != item.value+'2'"  @click="paixug(item.value,1)"></i>
                             <i class="el-icon-caret-bottom" style="cursor: pointer;" :class="paixu==item.value+'1'?'lan':''"  v-if="paixu == item.value+'1'"  @click="paixug(item.value,2)"></i>
                             <i class="el-icon-caret-top" style="cursor: pointer;" :class="paixu==item.value+'2'?'lan':''" v-if="paixu==item.value+'2'" @click="paixu = ''"></i>

                           </div> -->
                           <!-- <div class="liebiaoli">操作</div> -->
                           <!-- <div class="liebiaoli">设置</div> -->
                         </div>

                       </div>


            <div class="liebiao2"  :style="{'width':xianshidekuandu}" v-for="item in list" :key="item" >
              <div class="zhibiao1" :class="item.chanpin == '合计'?'heji':''"  v-if="zhibiao1show">

                <div v-if="item.chanpin == null && all.sale_source == 'product'">产品已删除</div>
                <div v-if="item.chanpin == null && all.sale_source == 'channels'">未知渠道</div>
                <div v-if="item.chanpin != null" class="kflexcc" style="overflow: hidden;" :style="{height:item.shuju.length * 40 + 'px'}">{{item.chanpin}}</div>

              </div>
              <div :style="{'width':xianshidekuandu2}" >
                <div v-for="item2 in item.shuju" :key="item2" style="width: 100%; display: flex;">

                  <div class="liebiaoli zhibiao2"  :class="(item2.zhibiao2 == '合计' || item.chanpin == '合计')?'heji':''" v-if="zhibiao2show">

                    <span v-if="item2.zhibiao2 == null && all.sale_source == 'product'">产品已删除</span>
                    <span v-if="item2.zhibiao2 == null && all.sale_source == 'channels'">未知渠道</span>
                    <span v-if="item2.zhibiao2 != null">{{item2.zhibiao2}}</span>
                  </div>

                  <template v-for="(item3,index) in lie">
                          <div class="liebiaoli"  :class="(item2.zhibiao2 == '合计' || item.chanpin == '合计')?'heji':''" v-if="item3.xianshima" :key="index">
                            {{item2[item3.value]}}
                          </div>
                  </template>

                  <!-- <div class="liebiaoli" v-for="(item3,index) in lie" :key="index">
                    {{item2[item3.value]}}
                  </div> -->

                  <!-- <div class="liebiaoli">
                    <el-button size="medium" type="text">查看详情</el-button>
                  </div> -->
                  <!-- <div class="liebiaoli">设置</div> -->
                </div>
              </div>

            </div>
          </div>
        </div>

      </div>
    </div>
    <!-- <foot></foot> -->
    <notice></notice>
    <!-- <el-dialog title="设置显示的字段" :visible.sync="log" width="440px">
    	  <div>
          <el-checkbox-group v-model="xianshideziduan" @change="changexianshideziduan">
              <el-checkbox :label="item.name" v-for="item in peizhis.lie" :key="item.value" class="ketuodong"></el-checkbox>
          </el-checkbox-group>
        </div>
    	  <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="log = false">关闭</el-button>
    	  </span>
    </el-dialog> -->
    <tuozhuai ref="tuozhuai" @tuozhuaishowclose="tuozhuaishowclose" v-if="shanxuanlog" :xianshideziduan2="xianshideziduan" @xianshideshuju="xianshideshuju"></tuozhuai>

  </div>
</template>

<script>
  import axios from 'axios'
  import top from '@/components/top.vue'
  import left from '@/components/left.vue'
  import foot from '@/components/foot.vue'
  import notice from '@/components/notice.vue'
  import peizhi from '@/assets/peizhi.js'
  import moment from 'moment'
  import tuozhuai from './components/tuozhuai'
  import gundongtiao from './components/gundongtiao'
  import FileSaver from 'file-saver'
  import XLSX from 'xlsx';
import { parse } from 'semver'
  export default {
    components: {
      "left": left,
      "top": top,
      "foot": foot,
      "notice": notice,
      tuozhuai,
      gundongtiao
    },
    name: 'xinbaobiao',
    data() {
      return {
        shangqu:false,
        jiazaizhong:true,
        timeji:1,
        log:false,
        xianshideziduan:[],
        xianshidekuandu:0,
        xianshidekuandu2:0,

        prolists: "",
        shoplists: "",
        erjilists:"",
        gongyingshanglists: "",
        fenxiaoshanglists:"",
        qudaolists:"",
        qudaolaiyuanlists:"",
        shuju: "",
        xiaoshouqudaolists:"",
        kehujinglilists:"",
        sourceslists:"",

        all2:{
          zhibiao1:[],
          zhibiao2:[]
        },

        baobiao: "",
        baobiao2: "",
        peizhis:{
          order_status1:"",//		是	string	订单状态
          pay_status:"",//		是	string	付款退款
          active_status:"",//		是	string	激活状态
          lie:[
            {name:"订单数量",value:"amount",xianshima:true,tex:""},
            {name:"审核通过",value:"approval_amount",xianshima:true,tex:"订单通过了初步审核"},
            {name:"审核通过率",value:"tongguolv",xianshima:true,tex:"订单通过初步审核的占比"},
            {name:"提单成功数",value:"submit_amount",xianshima:true,tex:"订单成功提交给上游接口或人工导出订单后订单状态变更为：已领取"},
            {name:"提单成功率",value:"tidanlv",xianshima:true,tex:"提单成功数/订单总数"},
            {name:"发货数",value:"deliver_amount",xianshima:true,tex:"已发货的订单数量"},
            {name:"发货率",value:"fahuolv",xianshima:true,tex:"发货数/总订单数"},

            {name:"初审失败数",value:"approval_fail_amount",xianshima:true,tex:"初审失败的订单数量"},

            {name:"生产失败数",value:"fail_amount",xianshima:true,tex:"生产失败的订单数量"},
            {name:"生产失败率",value:"shengchanshibailv",xianshima:true,tex:"初审失败数+生产失败数/总订单数"},

            {name:"激活数",value:"active_amount",xianshima:true,tex:"订单状态为已激活和激活且充值的订单总数"},
            {name:"激活且充值数",value:"recharge_amount",xianshima:true,tex:"订单状态为激活且充值的订单数"},
            {name:"充值率",value:"chongzhilv",xianshima:true,tex:"激活且充值的订单数/激活订单数"},
            {name:"激活率",value:"jihuolv1",xianshima:true,tex:"激活数/订单总数"},
            // {name:"激活率（按订单）",value:"jihuolv1"},
            {name:"激活率（按发货）",value:"jihuolv2",xianshima:true,tex:"激活数/发货数"},
            // {name:"激活率（按退款）",value:"jihuolv3"},
            {name:"实际交易额",value:"shijijiaoyie",xianshima:true,tex:"用户为订单支付的金额"},
            // {name:"推广费用",value:"tuiguangfeiyong",xianshima:true,tex:""},
            // {name:"其他费用",value:"qitafeiyong",xianshima:true,tex:""},
            // {name:"预估佣金",value:"yuguchengben",xianshima:true,tex:"预计每个订单合格结算后的佣金收入"},
            // {name:"发货成本",value:"fahuochengben",xianshima:true,tex:""},
            // {name:"激活成本",value:"jihuochengben",xianshima:true,tex:""},
          ]
        },


        all: {
          start:"",//	2023-03-07	是	string	无
          end:"",//	2023-03-16	是	string	无
          sale_source:"",//		是	string	销售渠道
          product_source:"",//		是	string	产品product 商品page运营商渠道product_source供应商supplier
          date:"",//	day	是	string	时间类型按天day
          order_status:"",//		是	string	订单状态
          pay_status:"",//		是	string	付款退款
          active_status:"",//		是	string	激活状态
          product_ids:[],//		是	string	数组 产品id
          page_ids:[],//		是	string	数组 商品id
          channel_ids:[],//		是	string	数组 渠道来源
          sources:[],//		是	string	数组 渠道
          supplier_ids:[],
          merchant_ids:[],
          product_sources:[],
          sub_sources:[],
          cm_id:""
        },
        n: 25,
        list2: [],
        list: [],
        zhibiao1show:false,
        zhibiao2show:false,
        zhibiao1name:"",
        zhibiao2name:"",

        lie:[
          // {name:"指标2",value:"zhibiao2"},
          // {name:"订单数量",value:"amount"},
          // {name:"审核通过",value:"approval_amount"},
          // {name:"审核通过率",value:"tongguolv"},
          // {name:"提单成功数",value:"submit_amount"},
          // {name:"提单成功率",value:"tidanlv"},
          // {name:"发货数",value:"deliver_amount"},
          // {name:"发货率",value:"fahuolv"},
          // {name:"生产失败数",value:"fail_amount"},
          // {name:"生产失败率",value:"shengchanshibailv"},
          // {name:"实际交易额",value:"shijijiaoyie"},
          // {name:"推广费用",value:"tuiguangfeiyong"},
          // {name:"其他费用",value:"qitafeiyong"},
          // {name:"预估佣金",value:"yuguchengben"},
          // {name:"发货成本",value:"fahuochengben"},
          // {name:"激活成本",value:"jihuochengben"},
          // {name:"激活数",value:"active_amount"},
          // {name:"激活且充值数",value:"recharge_amount"},
          // {name:"充值率",value:"chongzhilv"},
          // {name:"激活率（按订单）",value:"jihuolv1"},
          // {name:"激活率（按发货）",value:"jihuolv2"},
          // {name:"激活率（按退款）",value:"jihuolv3"},
        ],
        times:[],
        paixu:"",
        zidingyi:{},
        zidingyilist:"",
        navkli:0,
        gundongtiaolog:false,
        gundongtiaokuandu:0,
        shanxuanlog:false,
        shopid:""
      }
    },
    watch:{
      'all2.zhibiao1':{
        handler(newValue, oldValue) {
          if(newValue && newValue != ''){

            this.all2.zhibiao2 = []
            this.zhibiao2show = false

            this.all.product_source = ''
            this.all.sale_source = ''
            this.all.date = ''

            this.zhibiao1show = true

            if(newValue[1]== 'supplier'){
              this.all.product_source = 'supplier'
              this.zhibiao1name = '上游供应商'
              // this.all.sale_source = ''
              // this.all.date = ''
              this.all.product_sources = []

            }
            if(newValue[1]== 'product'){
              this.all.product_source = 'product'
              this.zhibiao1name = '产品'
              // this.all.sale_source = ''
              // this.all.date = ''
            }
            if(newValue[1]== 'page'){
              this.all.product_source = 'page'
              this.zhibiao1name = '商品'
              // this.all.sale_source = ''
              // this.all.date = ''
            }
            if(newValue[1]== 'product_source'){
              this.all.product_source = 'product_source'
              this.zhibiao1name = '运营商渠道'
              // this.all.sale_source = ''
              // this.all.date = ''
              this.all.supplier_ids = []
            }
            // if(newValue[1]== 'sale_source'){
            //   this.all.sale_source = 'source'
            //   this.all.product_source = ''
            //   this.all.date = ''

            //   选择销售渠道
            //   if(oldValue && oldValue != ''){
            //     if(newValue[1] != oldValue[1]){
            //       this.page_ids = []
            //       this.getxiaoshouqudaolist(newValue[1])
            //     }
            //   }else{
            //     this.getxiaoshouqudaolist(newValue[1])
            //   }

            // }
            // if(newValue[0]== 'merchant'){
            //   this.all.sale_source = 'merchant'
            //   this.all.product_source = ''
            //   this.all.date = ''
            // }

            if(newValue[1]== 'all'){
              this.all.sale_source = 'all'
              // this.all.product_source = ''
              // this.all.date = ''
            }
            if(newValue[1]== 'source'){
              this.all.sale_source = 'source'
              this.zhibiao1name = '订单来源'
              // this.all.product_source = ''
              // this.all.date = ''
              this.all.merchant_ids = []
            }
            if(newValue[1]== 'channels'){
              this.all.sale_source = 'channels'
              this.zhibiao1name = '销售渠道'
              // this.all.product_source = ''
              // this.all.date = ''
              this.all.merchant_ids = []
            }

            if(newValue[1]== 'merchant'){
              this.all.sale_source = 'merchant'
              this.zhibiao1name = '分销商'
              // this.all.product_source = ''
              // this.all.date = ''
              this.all.channel_ids = []
            }
            if(newValue[1]== 'day'){
              this.all.date = 'day'
              this.zhibiao1name = '按日汇总'
              // this.all.product_source = ''
              // this.all.sale_source = ''
            }
            if(newValue[1]== 'week'){
              this.all.date = 'week'
              this.zhibiao1name = '按周汇总'
              // this.all.product_source = ''
              // this.all.sale_source = ''
            }
            if(newValue[1]== 'month'){
              this.all.date = 'month'
              this.zhibiao1name = '按月汇总'
              // this.all.product_source = ''
              // this.all.sale_source = ''
            }

            this.baobiao2 = JSON.parse(JSON.stringify(this.baobiao))
            this.baobiao2.forEach(item => {

              if (item.value == this.all2.zhibiao1[0]) {
                item.disabled = true
              }

              // if(this.all2.zhibiao1[0] == 'merchant' || this.all2.zhibiao1[0] == 'sale_source'){
              //   if(item.value == 'merchant' || item.value == 'sale_source'){
              //     item.disabled = true
              //   }
              // }

            })
          }else{
            this.all2.zhibiao2 = []
            this.zhibiao2show = false

            this.all.product_source = ''
            this.all.sale_source = ''
            this.all.date = ''
          }

          // if(newValue && newValue != '' &&  oldValue && oldValue != ''){
          //   if(oldValue[1]== 'supplier'){
          //     this.all.supplier_ids = []
          //   }
          //   if(oldValue[1]== 'product'){
          //     this.all.product_ids = []
          //   }
          //   if(oldValue[1]== 'page'){
          //     this.all.page_ids = []
          //   }
          //   if(oldValue[1]== 'product_source'){
          //     this.all.product_sources = []
          //   }
          //   if(oldValue[0]== 'sale_source'){
          //     this.all.sources = []
          //   }
          // }
        },
        deep: true,
        immediate: true
      },
      'all2.zhibiao2':{
        handler(newValue, oldValue) {

          if(newValue && newValue != ''){

            this.zhibiao2show = true

            if (newValue[1] == 'product'){
              this.all.product_source = 'product'
              this.zhibiao2name = '产品'
              /////////////////////////////////////////////
              if(this.all2.zhibiao1[1] == 'source' || this.all2.zhibiao1[1] == 'channels'  || this.all2.zhibiao1[1] == 'merchant'  || this.all2.zhibiao1[1] == 'all' ){
                this.all.date = ''
              }
              if(this.all2.zhibiao1[1] == 'day' || this.all2.zhibiao1[1] == 'week' || this.all2.zhibiao1[1] == 'month'){
                this.all.sale_source = ''
              }
            }
            if (newValue[1] == 'supplier'){
              this.all.product_source = 'supplier'
              this.zhibiao2name = '上游供应商'
              this.all.product_sources = []
              /////////////////////////////////////////////
              if(this.all2.zhibiao1[1] == 'source' || this.all2.zhibiao1[1] == 'channels'  || this.all2.zhibiao1[1] == 'merchant'  || this.all2.zhibiao1[1] == 'all' ){
                this.all.date = ''
              }
              if(this.all2.zhibiao1[1] == 'day' || this.all2.zhibiao1[1] == 'week' || this.all2.zhibiao1[1] == 'month'){
                this.all.sale_source = ''
              }
            }
            if (newValue[1] == 'page'){
              this.all.product_source = 'page'
              this.zhibiao2name = '商品'
              /////////////////////////////////////////////
              if(this.all2.zhibiao1[1] == 'source' || this.all2.zhibiao1[1] == 'channels'  || this.all2.zhibiao1[1] == 'merchant'  || this.all2.zhibiao1[1] == 'all' ){
                this.all.date = ''
              }
              if(this.all2.zhibiao1[1] == 'day' || this.all2.zhibiao1[1] == 'week' || this.all2.zhibiao1[1] == 'month'){
                this.all.sale_source = ''
              }
            }
            if (newValue[1] == 'product_source'){
              this.all.product_source = 'product_source'
              this.zhibiao2name = '运营商渠道'
              this.all.supplier_ids = []
              /////////////////////////////////////////////
              if(this.all2.zhibiao1[1] == 'source' || this.all2.zhibiao1[1] == 'channels'  || this.all2.zhibiao1[1] == 'merchant'  || this.all2.zhibiao1[1] == 'all' ){
                this.all.date = ''
              }
              if(this.all2.zhibiao1[1] == 'day' || this.all2.zhibiao1[1] == 'week' || this.all2.zhibiao1[1] == 'month'){
                this.all.sale_source = ''
              }
            }



            if (newValue[1] == 'source'){

              this.all.sale_source = 'source'
              this.zhibiao2name = '订单来源'
              this.all.merchant_ids = []
              /////////////////////////////////////////////
              if(this.all2.zhibiao1[1] == 'product' || this.all2.zhibiao1[1] == 'page' || this.all2.zhibiao1[1] == 'product_source' || this.all2.zhibiao1[1] == 'supplier'){
                this.all.date = ''
              }
              if(this.all2.zhibiao1[1] == 'day' || this.all2.zhibiao1[1] == 'week' || this.all2.zhibiao1[1] == 'month'){
                this.all.product_source = ''
              }


              //选择销售渠道
              // if(oldValue && oldValue != ''){
              //   if(newValue[1] != oldValue[1]){
              //     this.page_ids = []
              //     this.getxiaoshouqudaolist(this.all2.zhibiao2[1])
              //   }
              // }else{
              //   this.getxiaoshouqudaolist(this.all2.zhibiao2[1])
              // }
            }
            if (newValue[1] == 'channels'){
              this.all.sale_source = 'channels'
              this.zhibiao2name = '销售渠道'
              this.all.merchant_ids = []
              /////////////////////////////////////////////
              if(this.all2.zhibiao1[1] == 'product' || this.all2.zhibiao1[1] == 'page' || this.all2.zhibiao1[1] == 'product_source' || this.all2.zhibiao1[1] == 'supplier'){
                this.all.date = ''
              }
              if(this.all2.zhibiao1[1] == 'day' || this.all2.zhibiao1[1] == 'week' || this.all2.zhibiao1[1] == 'month'){
                this.all.product_source = ''
              }
            }
            if (newValue[1] == 'merchant'){
              this.all.sale_source = 'merchant'
              this.zhibiao2name = '分销商'
              this.all.channel_ids = []
              /////////////////////////////////////////////
              if(this.all2.zhibiao1[1] == 'product' || this.all2.zhibiao1[1] == 'page' || this.all2.zhibiao1[1] == 'product_source' || this.all2.zhibiao1[1] == 'supplier'){
                this.all.date = ''
              }
              if(this.all2.zhibiao1[1] == 'day' || this.all2.zhibiao1[1] == 'week' || this.all2.zhibiao1[1] == 'month'){
                this.all.product_source = ''
              }
            }
            if (newValue[1] == 'all'){
              this.all.sale_source = 'all'
              /////////////////////////////////////////////
              if(this.all2.zhibiao1[1] == 'product' || this.all2.zhibiao1[1] == 'page' || this.all2.zhibiao1[1] == 'product_source' || this.all2.zhibiao1[1] == 'supplier'){
                this.all.date = ''
              }
              if(this.all2.zhibiao1[1] == 'day' || this.all2.zhibiao1[1] == 'week' || this.all2.zhibiao1[1] == 'month'){
                this.all.product_source = ''
              }
            }



            if (newValue[1] == 'day'){
              this.all.date = 'day'
              this.zhibiao2name = '按日汇总'
              /////////////////////////////////////////////
              if(this.all2.zhibiao1[1] == 'product' || this.all2.zhibiao1[1] == 'page' || this.all2.zhibiao1[1] == 'product_source' || this.all2.zhibiao1[1] == 'supplier'){
                this.all.sale_source = ''
              }
              if(this.all2.zhibiao1[1] == 'source' || this.all2.zhibiao1[1] == 'channels'  || this.all2.zhibiao1[1] == 'merchant'  || this.all2.zhibiao1[1] == 'all' ){
                this.all.product_source = ''
              }
            }
            if (newValue[1] == 'week'){
              this.all.date = 'week'
              this.zhibiao2name = '按周汇总'
              /////////////////////////////////////////////
              if(this.all2.zhibiao1[1] == 'product' || this.all2.zhibiao1[1] == 'page' || this.all2.zhibiao1[1] == 'product_source' || this.all2.zhibiao1[1] == 'supplier'){
                this.all.sale_source = ''
              }
              if(this.all2.zhibiao1[1] == 'source' || this.all2.zhibiao1[1] == 'channels'  || this.all2.zhibiao1[1] == 'merchant'  || this.all2.zhibiao1[1] == 'all' ){
                this.all.product_source = ''
              }
            }
            if (newValue[1] == 'month'){
              this.all.date = 'month'
              this.zhibiao2name = '按月汇总'
              /////////////////////////////////////////////
              if(this.all2.zhibiao1[1] == 'product' || this.all2.zhibiao1[1] == 'page' || this.all2.zhibiao1[1] == 'product_source' || this.all2.zhibiao1[1] == 'supplier'){
                this.all.sale_source = ''
              }
              if(this.all2.zhibiao1[1] == 'source' || this.all2.zhibiao1[1] == 'channels'  || this.all2.zhibiao1[1] == 'merchant'  || this.all2.zhibiao1[1] == 'all' ){
                this.all.product_source = ''
              }
            }
          }else{
            this.zhibiao2show = false

            if(this.all2.zhibiao1[1] == 'product' || this.all2.zhibiao1[1] == 'page' || this.all2.zhibiao1[1] == 'product_source' || this.all2.zhibiao1[1] == 'supplier'){
              this.all.sale_source = ''
              this.all.date = ''
            }
            if(this.all2.zhibiao1[1] == 'source' || this.all2.zhibiao1[1] == 'channels'  || this.all2.zhibiao1[1] == 'merchant'  || this.all2.zhibiao1[1] == 'all' ){
              this.all.date = ''
              this.all.product_source = ''
            }
            if(this.all2.zhibiao1[1] == 'day' || this.all2.zhibiao1[1] == 'week' || this.all2.zhibiao1[1] == 'month'){
              this.all.sale_source = ''
              this.all.product_source = ''
            }

          }



          // if(newValue && newValue != '' && oldValue && oldValue != ''){
          //   if(oldValue[1]== 'supplier'){
          //     this.all.supplier_ids = []
          //   }
          //   if(oldValue[1]== 'product'){
          //     this.all.product_ids = []
          //   }
          //   if(oldValue[1]== 'page'){
          //     this.all.page_ids = []
          //   }
          //   if(oldValue[1]== 'product_source'){
          //     this.all.product_sources = []
          //   }
          //   if(oldValue[1]== 'sale_source'){
          //     this.all.sources = []
          //   }

          // }
        },
        deep: true,
        immediate: true
      },
      zhibiao1show(newVal, oldVal){
        let n = 0
        if(this.xianshideziduan){
          let arrn = this.xianshideziduan.filter(item=>{
            return item.xianshima
          })
          n = arrn.length
        }

        if(this.zhibiao1show){
          n = n + 1
        }
        if(this.zhibiao2show){
          n = n + 1
        }
        this.xianshidekuandu = 150 * n + 'px';
        this.xianshidekuandu2 = 150 * (n - 1) + 'px';

        this.gundongtiaolog = false
        this.gundongtiaokuandu = 150 * n
        this.gundongtiaolog = true

      },
      zhibiao2show(newVal, oldVal){
        let n = 0
        if(this.xianshideziduan){
          let arrn = this.xianshideziduan.filter(item=>{
            return item.xianshima
          })
          n = arrn.length
        }
        if(this.zhibiao1show){
          n = n + 1
        }
        if(this.zhibiao2show){
          n = n + 1
        }
        this.xianshidekuandu = 150 * n + 'px';
        this.xianshidekuandu2 = 150 * (n - 1) + 'px';

        this.gundongtiaolog = false
        this.gundongtiaokuandu = 150 * n
        this.gundongtiaolog = true
      },
      xianshideziduan(newVal, oldVal) {
        let n = 0
        if(newVal){
          let arrn = newVal.filter(item=>{
            return item.xianshima
          })
          n = arrn.length
        }
        if(this.zhibiao1show){
          n = n + 1
        }
        if(this.zhibiao1show){
          n = n + 1
        }
        this.xianshidekuandu = 150 * n + 'px';
        this.xianshidekuandu2 = 150 * (n - 1) + 'px';
      },

    },

    created() {
      //初始化
      //1配置
      this.baobiao = peizhi.baobiao
      this.peizhis.order_status1 = peizhi.order_status1
      this.peizhis.pay_status = peizhi.pay_status
      this.peizhis.active_status = peizhi.active_status
      //获取各种选择列表
      this.getgezhonglist()

      //获取全部产品
      this.getgezhonglist1()
      this.getgezhonglist2()
      this.getgezhonglist3()
      this.getgezhonglist4()

      //默认时间
      this.times = [moment().format('YYYY-MM-DD 00:00:00'),moment().format('YYYY-MM-DD HH:mm:ss')]
      this.all.start = moment().format('YYYY-MM-DD 00:00:00')
      this.all.end = moment().format('YYYY-MM-DD HH:mm:ss')

      //1全选 或者读本地 或者接口
      this.peizhis.lie.forEach(item2=>{
        this.xianshideziduan.push(item2)
      })
      this.lie = this.peizhis.lie

      this.jiazaizhong = false

      this.getzidingyi()

      //店铺权限问题
      //落基有权限
      axios.get('/api/gth/user/shop')
          .then(response => {
              if(response.data.msg.code == 0){
                  this.shopid = response.data.data.shop_id
              }else{
                  this.$message.error(response.data.msg.info);
              }
          })
    },
    mounted() {
      if(localStorage.getItem('xianshideshuju')){
        this.xianshideshuju(JSON.parse(localStorage.getItem('xianshideshuju')))
      }

      this.$refs.right.addEventListener('scroll',()=>{
        console.log(this.$refs.right.scrollTop)
        if(this.$refs.right.scrollTop > 710){
          this.shangqu = true
        }else{
          this.$refs.tabs1.scrollLeft = 0
           this.shangqu = false
        }
      })

      this.$refs.tabs.addEventListener('scroll',()=>{
        console.log(this.$refs.tabs.scrollLeft)
        this.$refs.tabs1.scrollLeft = this.$refs.tabs.scrollLeft
        // if(this.$refs.right.scrollTop > 710){
        //   this.shangqu = true
        // }else{
        //    this.shangqu = false
        // }
      })

      // this.$refs.tabs.addEventListener('scroll',()=>{
      //   console.log(this.$refs.tabs.scrollTop)
      //   console.log(this.$refs.tabs.offsetTop)
      //   if(this.$refs.tabs.scrollTop > 40){

      //   }
      // })

      // this.$refs.tabs.addEventListener('scroll',()=>{

      //   // let p1 = this.$refs.tabs.scrollLeft
      //   // let p2 = parseInt(this.xianshidekuandu.split('px')[0])

      //   // this.$refs.gundongtiao.yidong(p1 / p2)

      //   let p1 = this.$refs.tabs.scrollLeft

      //   this.$refs.tabs1.scrollLeft = p1
      // })


    },
    methods: {
      xiazai:function(){
        let url = ''
        if(window.location.href.indexOf("91haoka_platform") > -1){
        	url = window.location.origin + window.location.pathname
        }

        const a = document.createElement('a');
        a.setAttribute('download', '报表使用说明.pdf');
        a.setAttribute('href', url+'static/baobiaoshiyongshuoming.pdf');
        a.click();
      },
      daochu:function(){
        var wopts = {
        	bookType: 'xlsx',
        	bookSST: true,
        	type: 'binary'
        };
        var workBook = {
        	SheetNames: ['Sheet1'],
        	Sheets: {},
        	Props: {}
        };
        var table = [];
        let multipleSelection = this.list
        // <div class="zhibiao1"  v-if="zhibiao1show">
        //   <span v-if="item.chanpin == null && all.sale_source == 'product'">产品已删除</span>
        //   <span v-if="item.chanpin == null && all.sale_source == 'channels'">未知渠道</span>
        //   <span v-if="item.chanpin != null">{{item.chanpin}}</span>

        // </div>
        // <div :style="{'width':xianshidekuandu2}" >
        //   <div v-for="item2 in item.shuju" :key="item2" style="width: 100%; display: flex;">

        //     <div class="liebiaoli zhibiao2" v-if="zhibiao2show">

        //       <span v-if="item2.zhibiao2 == null && all.sale_source == 'product'">产品已删除</span>
        //       <span v-if="item2.zhibiao2 == null && all.sale_source == 'channels'">未知渠道</span>
        //       <span v-if="item2.zhibiao2 != null">{{item2.zhibiao2}}</span>
        //     </div>

        //     <template v-for="(item3,index) in lie">
        //             <div class="liebiaoli" v-if="item3.xianshima" :key="index">
        //               {{item2[item3.value]}}
        //             </div>
        //     </template>
        console.log(this.list)
        let data = []
        this.list.forEach(itemx=>{

          itemx.shuju.forEach(itemx2=>{
            let obj = {}
            if(this.zhibiao1show){
              obj[this.zhibiao1name] = itemx.chanpin
            }
            this.lie.forEach(item=>{
              if(this.zhibiao2show){
                obj[this.zhibiao2name] = itemx2.zhibiao2
              }
              if(item.xianshima){
                obj[item.name] = itemx2[item.value]
              }
            })
            data.push(obj)
          })

        })
        console.log(data)
        // for (var i = 0; i < multipleSelection.length; i++) {
        // 	// var params = {
        // 	// 	acessNumber: multipleSelection[i].acessNumber,
        // 	// 	activateMonth: multipleSelection[i].activateMonth,
        // 	// 	beginTime: multipleSelection[i].beginTime,
        // 	// 	createBy: multipleSelection[i].createBy,
        // 	// 	createTime: multipleSelection[i].createTime,
        // 	// 	delFlag: multipleSelection[i].delFlag,
        // 	// 	endTime: multipleSelection[i].endTime,
        // 	// 	iccid: multipleSelection[i].iccid,
        // 	// 	id: multipleSelection[i].id,
        // 	// 	importId: multipleSelection[i].importId,
        // 	// 	isRealName: multipleSelection[i].isRealName,
        // 	// 	merchantId: multipleSelection[i].merchantId,
        // 	// 	merchantName: multipleSelection[i].merchantName,
        // 	// 	packageId: multipleSelection[i].packageId,
        // 	// 	paidMonth: multipleSelection[i].paidMonth,
        // 	// 	phone: multipleSelection[i].phone,
        // 	// 	reason: multipleSelection[i].reason,
        // 	// 	status: multipleSelection[i].status,
        // 	// 	updateBy: multipleSelection[i].updateBy,
        // 	// 	updateTime: multipleSelection[i].updateTime,
        // 	// 	useFlow: multipleSelection[i].useFlow,
        // 	// 	userId: multipleSelection[i].userId
        // 	// }
        //   var params = {
        //     chanpin:multipleSelection[i].chanpin
        //   }
        //   multipleSelection[i].shuju.forEach(item=>{

        //   })
        // 	table[i] = params
        // };
        table = data
        workBook.Sheets['Sheet1'] = XLSX.utils.json_to_sheet(table);
        console.log(workBook)
        FileSaver.saveAs(new Blob([this.changeData(XLSX.write(workBook, wopts))], {
        	type: 'application/octet-stream'
        }), "sheetjs.xlsx")
      },
      changeData: function(s) {
      	//如果存在ArrayBuffer对象(es6) 最好采用该对象
      	if (typeof ArrayBuffer !== 'undefined') {
      		//1、创建一个字节长度为s.length的内存区域
      		var buf = new ArrayBuffer(s.length);
      		//2、创建一个指向buf的Unit8视图，开始于字节0，直到缓冲区的末尾
      		var view = new Uint8Array(buf);
      		//3、返回指定位置的字符的Unicode编码
      		for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
      		return buf;
      	} else {
      		var buf = new Array(s.length);
      		for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF;
      		return buf;
      	}
      },
      baifenbi:function(ji){
        this.$refs.tabs.scrollLeft = this.gundongtiaokuandu * ji
      },
      yongzidingyi:function(item){

        this.navkli = item.id
        if(item.config_data){
          let data = JSON.parse(item.config_data)
          console.log(data)
          if(data.all){
             this.all = data.all
          }

          this.$nextTick(()=>{
            this.timejichange(data.timeji)
          })

          if(data.all2){
              this.all2.zhibiao1 = data.all2.zhibiao1
              this.$nextTick(()=>{
                this.all2.zhibiao2 = data.all2.zhibiao2
              })
          }
          //自定义显示字段用
          this.lie = data.xianshideziduan
          this.xianshideziduan = data.xianshideziduan
          this.timeji = data.timeji

          //滚动条用
          this.gundongtiaolog = false

          this.$nextTick(()=>{
            this.gundongtiaolog = true
          })



          this.$nextTick(()=>{
            this.getshuju()
          })

        }
      },
      shanchuzidingyi:function(){
        this.$confirm('确定删除当前自定义内容么？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.post('/api/form/config/delete',{id:this.navkli})
            .then(response => {

              if (response.data.msg.code == 0) {
                this.$message.success('删除成功');
                // this.getzidingyi()
                window.location.reload()
              } else {
                this.$message.error(response.data.msg.info);
              }
            })
        })
      },
      baocunzidingyi2:function(){
        if(!this.navkli){
          this.$message.error('请选择自定义报表');
          return false
        }
        let obj = {
          all:this.all,
          all2:this.all2,
          xianshideziduan:this.xianshideziduan,
          timeji:this.timeji
        }

        let zidingyi = {
          id:"",
          config_name:"",
          config_data:""
        }
        this.zidingyilist.forEach(item=>{
          if(item.id == this.navkli){
            zidingyi = {
              id:item.id,
              config_name:item.config_name,
              config_data:JSON.stringify(obj)
            }
          }
        })

        axios.post('/api/form/config/make',zidingyi)
          .then(response => {

            if (response.data.msg.code == 0) {
              this.$message.success('保存成功');
              this.getzidingyi()
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      baocunzidingyi:function(){
        this.$prompt('输入报表名称', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(({ value }) => {
          let obj = {
            all:this.all,
            all2:this.all2,
            xianshideziduan:this.xianshideziduan,
            timeji:this.timeji
          }

          this.zidingyi = {
            config_name:value,
            config_data:JSON.stringify(obj)
          }
          axios.post('/api/form/config/make',this.zidingyi)
            .then(response => {

              if (response.data.msg.code == 0) {
                this.$message.success('保存成功');
                this.getzidingyi()
              } else {
                this.$message.error(response.data.msg.info);
              }
            })
        })


      },
      getzidingyi:function(){
        axios.get('/api/form/config/list')
          .then(response => {
            if (response.data.msg.code == 0) {
              this.zidingyilist = response.data.data
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      paixug:function(val,num){
        console.log(val)
        this.paixu = val + num
        this.getshuju()
      },
      tuozhuaishow:function(){
        this.shanxuanlog = true

        this.$nextTick(()=>{
          this.$refs.tuozhuai.log = true
        })

      },
      tuozhuaishowclose:function(){
        this.shanxuanlog = false
      },
      xianshideshuju:function(xianshideshuju){

        this.lie = xianshideshuju
        this.xianshideziduan = xianshideshuju

        let n = 0
        if(this.xianshideziduan){
          let arrn = this.xianshideziduan.filter(item=>{
            return item.xianshima
          })
          n = arrn.length
        }

        if(this.zhibiao1show){
          n = n + 1
        }
        if(this.zhibiao2show){
          n = n + 1
        }


        this.gundongtiaolog = false
        this.gundongtiaokuandu = 150 * n
        this.$nextTick(()=>{
          this.gundongtiaolog = true
        })

        localStorage.setItem('xianshideshuju',JSON.stringify(xianshideshuju))

      },
      // changexianshideziduan:function(){
      //   let arr = []
      //   this.xianshideziduan.forEach(item=>{
      //     this.peizhis.lie.forEach(item2=>{
      //       if(item.includes(item2.name)){
      //         arr.push(item2)
      //       }
      //     })
      //   })
      //   this.lie = arr
      // },
      timejichange:function(ji){
        this.timeji = ji
        if(ji == 1){
          this.times = [moment().format('YYYY-MM-DD 00:00:00'),moment().format('YYYY-MM-DD HH:mm:ss')]
        }
        if(ji == 2){
          this.times = [moment().subtract(1, 'days').format('YYYY-MM-DD 00:00:00'),moment().subtract(1, 'days').format('YYYY-MM-DD 23:59:59')]
        }
        if(ji == 3){
          this.times = [moment().subtract(7, 'days').format('YYYY-MM-DD 00:00:00'),moment().subtract(1, 'days').format('YYYY-MM-DD 23:59:59')]
        }
        if(ji == 4){
          this.times = [moment().subtract(30, 'days').format('YYYY-MM-DD 00:00:00'),moment().subtract(1, 'days').format('YYYY-MM-DD 23:59:59')]
        }
        this.all.start = this.times[0]
        this.all.end = this.times[1]

      },
      changetimes:function(){
        console.log(this.times)
        this.timeji = ''
        this.all.start = this.times[0]
        this.all.end = this.times[1]
      },
      handleChange1: function() {
          // this.all2.zhibiao2 = []
          // this.zhibiao2show = false

          // if(this.all2.zhibiao1 != ''){
          //   this.zhibiao1show = true
          // }


          // if (this.all2.zhibiao1[1] == 'product'){
          //   this.all.product_source = 'product'
          //   this.all.sale_source = ''
          //   this.all.date = ''
          // }
          // if (this.all2.zhibiao1[1] == 'supplier'){
          //   this.all.product_source = 'supplier'
          //   this.all.sale_source = ''
          //   this.all.date = ''
          // }
          // if (this.all2.zhibiao1[1] == 'page'){
          //   this.all.product_source = 'page'
          //   this.all.sale_source = ''
          //   this.all.date = ''
          // }
          // if (this.all2.zhibiao1[1] == 'product_source'){
          //   this.all.product_source = 'product_source'
          //   this.all.sale_source = ''
          //   this.all.date = ''
          // }

          // if (this.all2.zhibiao1[0] == 'sale_source'){
          //   this.all.sale_source = 'source'

          //   this.all.product_source = ''
          //   this.all.date = ''
          //   this.getxiaoshouqudaolist(this.all2.zhibiao1[1])
          // }

          // if (this.all2.zhibiao1[1] == 'day'){
          //   this.all.date = 'day'
          //   this.all.product_source = ''
          //   this.all.sale_source = ''
          // }
          // if (this.all2.zhibiao1[1] == 'week'){
          //   this.all.date = 'week'
          //   this.all.product_source = ''
          //   this.all.sale_source = ''
          // }
          // if (this.all2.zhibiao1[1] == 'month'){
          //   this.all.date = 'month'
          //   this.all.product_source = ''
          //   this.all.sale_source = ''
          // }

          // this.baobiao2 = JSON.parse(JSON.stringify(this.baobiao))
          // this.baobiao2.forEach(item => {
          //   if (item.value == this.all2.zhibiao1[0]) {
          //     item.disabled = true
          //   }
          // })

      },

      handleChange2: function() {

          // if(this.all2.zhibiao2 != ''){
          //   this.zhibiao2show = true
          // }

          // if (this.all2.zhibiao2[1] == 'product'){
          //   this.all.product_source = 'product'
          //   /////////////////////////////////////////////
          //   if(this.all2.zhibiao1[0] == 'sale_source'){
          //     this.all.date = ''
          //   }
          //   if(this.all2.zhibiao1[1] == 'day' || this.all2.zhibiao1[1] == 'week' || this.all2.zhibiao1[1] == 'month'){
          //     this.all.sale_source = ''
          //   }
          // }
          // if (this.all2.zhibiao2[1] == 'supplier'){
          //   this.all.product_source = 'supplier'
          //   /////////////////////////////////////////////
          //   if(this.all2.zhibiao1[0] == 'sale_source'){
          //     this.all.date = ''
          //   }
          //   if(this.all2.zhibiao1[1] == 'day' || this.all2.zhibiao1[1] == 'week' || this.all2.zhibiao1[1] == 'month'){
          //     this.all.sale_source = ''
          //   }
          // }
          // if (this.all2.zhibiao2[1] == 'page'){
          //   this.all.product_source = 'page'
          //   /////////////////////////////////////////////
          //   if(this.all2.zhibiao1[0] == 'sale_source'){
          //     this.all.date = ''
          //   }
          //   if(this.all2.zhibiao1[1] == 'day' || this.all2.zhibiao1[1] == 'week' || this.all2.zhibiao1[1] == 'month'){
          //     this.all.sale_source = ''
          //   }
          // }
          // if (this.all2.zhibiao2[1] == 'product_source'){
          //   this.all.product_source = 'product_source'
          //   /////////////////////////////////////////////
          //   if(this.all2.zhibiao1[0] == 'sale_source'){
          //     this.all.date = ''
          //   }
          //   if(this.all2.zhibiao1[1] == 'day' || this.all2.zhibiao1[1] == 'week' || this.all2.zhibiao1[1] == 'month'){
          //     this.all.sale_source = ''
          //   }
          // }



          // if (this.all2.zhibiao2[0] == 'sale_source'){
          //   this.all.sale_source = 'source'
          //   /////////////////////////////////////////////
          //   if(this.all2.zhibiao1[1] == 'product' || this.all2.zhibiao1[1] == 'page' || this.all2.zhibiao1[1] == 'product_source' || this.all2.zhibiao1[1] == 'supplier'){
          //     this.all.date = ''
          //   }
          //   if(this.all2.zhibiao1[1] == 'day' || this.all2.zhibiao1[1] == 'week' || this.all2.zhibiao1[1] == 'month'){
          //     this.all.product_source = ''
          //   }
          //   this.getxiaoshouqudaolist(this.all2.zhibiao2[1])
          // }



          // if (this.all2.zhibiao2[1] == 'day'){
          //   this.all.date = 'day'
          //   /////////////////////////////////////////////
          //   if(this.all2.zhibiao1[1] == 'product' || this.all2.zhibiao1[1] == 'page' || this.all2.zhibiao1[1] == 'product_source' || this.all2.zhibiao1[1] == 'supplier'){
          //     this.all.sale_source = ''
          //   }
          //   if(this.all2.zhibiao1[0] == 'sale_source'){
          //     this.all.product_source = ''
          //   }
          // }
          // if (this.all2.zhibiao2[1] == 'week'){
          //   this.all.date = 'week'
          //   /////////////////////////////////////////////
          //   if(this.all2.zhibiao1[1] == 'product' || this.all2.zhibiao1[1] == 'page' || this.all2.zhibiao1[1] == 'product_source' || this.all2.zhibiao1[1] == 'supplier'){
          //     this.all.sale_source = ''
          //   }
          //   if(this.all2.zhibiao1[0] == 'sale_source'){
          //     this.all.product_source = ''
          //   }
          // }
          // if (this.all2.zhibiao2[1] == 'month'){
          //   this.all.date = 'month'
          //   /////////////////////////////////////////////
          //   if(this.all2.zhibiao1[1] == 'product' || this.all2.zhibiao1[1] == 'page' || this.all2.zhibiao1[1] == 'product_source' || this.all2.zhibiao1[1] == 'supplier'){
          //     this.all.sale_source = ''
          //   }
          //   if(this.all2.zhibiao1[0] == 'sale_source'){
          //     this.all.product_source = ''
          //   }
          // }


      },

      getshuju: function() {
        if(!this.zhibiao1show && !this.zhibiao2show){
          this.$message.error('指标必须选择');
          return false
        }
        this.jiazaizhong = true
        axios.post('/api/plan-market/detail/data', this.all)
          .then(response => {
            if (response.data.msg.code == 0) {
              this.list = []
              let list = response.data.data
              //选择指标1的前提下
              if (list != '') {

                //有大类
                if(this.zhibiao1show){


                  let who = ''
                  if(this.all2.zhibiao1 != ''){
                    if (this.all2.zhibiao1[1] == 'product'){
                      who = 'pname'
                    }
                    if (this.all2.zhibiao1[1] == 'supplier'){
                      who = 'supplier'
                    }
                    if (this.all2.zhibiao1[1] == 'page'){
                      who = 'paname'
                    }
                    if (this.all2.zhibiao1[1] == 'product_source'){
                      who = 'product_source'
                    }


                    if (this.all2.zhibiao1[1] == 'source'){
                      who = 'source'
                    }
                    if (this.all2.zhibiao1[1] == 'merchant'){
                      who = 'source'
                    }

                    if (this.all2.zhibiao1[1] == 'channels'){
                      who = 'source'
                    }


                    if (this.all2.zhibiao1[1] == 'day'){
                      who = 'date'
                    }
                    if (this.all2.zhibiao1[1] == 'week'){
                      who = 'date'
                    }
                    if (this.all2.zhibiao1[1] == 'month'){
                      who = 'date'
                    }
                  }

                  let who2 = ''
                  if(this.all2.zhibiao2 != ''){
                    if (this.all2.zhibiao2[1] == 'product'){
                      who2 = 'pname'
                    }
                    if (this.all2.zhibiao2[1] == 'supplier'){
                      who2 = 'supplier'
                    }
                    if (this.all2.zhibiao2[1] == 'page'){
                      who2 = 'paname'
                    }
                    if (this.all2.zhibiao2[1] == 'product_source'){
                      who2 = 'product_source'
                    }
                    if (this.all2.zhibiao2[1] == 'source'){
                      who2 = 'source'
                    }
                    if (this.all2.zhibiao2[1] == 'merchant'){
                      who2 = 'source'
                    }

                    if (this.all2.zhibiao2[1] == 'channels'){
                      who2 = 'source'
                    }

                    if (this.all2.zhibiao2[1] == 'day'){
                      who2 = 'date'
                    }
                    if (this.all2.zhibiao2[1] == 'week'){
                      who2 = 'date'
                    }
                    if (this.all2.zhibiao2[1] == 'month'){
                      who2 = 'date'
                    }
                  }


                  let arr = []

                  list.forEach(item => {
                    arr.push(item[who])
                  })
                  let arr2 = [...new Set(arr)]


                  arr2.forEach((item, index) => {

                    let obj = {
                      chanpin: item,
                      shuju: []
                    }

                    list.forEach(item2 => {
                      if (item2[who] == item) {

                        item2.active_amount = parseInt(item2.active_amount)
                        item2.amount = parseInt(item2.amount)
                        item2.deliver_amount = parseInt(item2.deliver_amount)
                        item2.recharge_amount = parseInt(item2.recharge_amount)
                        item2.submit_amount = parseInt(item2.submit_amount)
                        item2.approval_amount = parseInt(item2.approval_amount)
                        item2.fail_amount = parseInt(item2.fail_amount)
                        item2.approval_fail_amount = parseInt(item2.approval_fail_amount)

                        item2.shijijiaoyie = parseInt(item2.shijijiaoyie) || 0
                        item2.tuiguangfeiyong = parseInt(item2.tuiguangfeiyong) || 0
                        item2.qitafeiyong = parseInt(item2.qitafeiyong) || 0
                        item2.yuguchengben = parseInt(item2.yuguchengben) || 0
                        item2.fahuochengben = parseInt(item2.fahuochengben) || 0
                        item2.jihuochengben = parseInt(item2.jihuochengben) || 0
                        item2.refund_amount = parseInt(item2.refund_amount) || 0

                        if(item2.amount != 0){
                          item2.tongguolv = ( item2.approval_amount /  item2.amount * 100).toFixed(2) +'%'
                          item2.tidanlv = ( item2.submit_amount /  item2.amount * 100).toFixed(2) +'%'
                          item2.fahuolv = ( item2.deliver_amount /  item2.amount * 100).toFixed(2) +'%'

                          item2.shengchanshibailv = ( (item2.fail_amount + item2.approval_fail_amount) /  item2.amount * 100).toFixed(2) +'%'


                          item2.jihuolv1 = ( item2.active_amount /  item2.amount * 100).toFixed(2) +'%'
                        }else{
                          item2.tongguolv = '0.00%'
                          item2.tidanlv = '0.00%'
                          item2.fahuolv = '0.00%'
                          item2.shengchanshibailv = '0.00%'

                          item2.jihuolv1 = '0.00%'
                        }
                        if(item2.active_amount != 0){
                          item2.chongzhilv = ( item2.recharge_amount /  item2.active_amount * 100).toFixed(2) +'%'
                        }else{
                          item2.chongzhilv = '0.00%'
                        }
                        if(item2.deliver_amount  != 0){
                          item2.jihuolv2 = ( item2.active_amount /  item2.deliver_amount * 100).toFixed(2) +'%'
                        }else{
                          item2.jihuolv2 = '0.00%'
                        }
                        // if(item2.active_amount != 0){
                        //   item2.jihuolv3 = ( item2.refund_amount /  item2.active_amount * 100).toFixed(2) +'%'
                        // }else{
                        //   item2.jihuolv3 = '0.00%'
                        // }



                        this.$set(item2,'zhibiao2',item2[who2])

                        obj.shuju.push(item2)
                      }
                    })


                    if(this.zhibiao2show){
                      let obj2 = {
                        zhibiao2: "合计",
                        amount: 0,
                        approval_amount: 0,
                        tongguolv: 0,
                        submit_amount: 0,
                        tidanlv: 0,
                        deliver_amount: 0,
                        fahuolv: 0,
                        fail_amount: 0,
                        approval_fail_amount:0,
                        shengchanshibailv: 0,
                        shijijiaoyie: 0,
                        tuiguangfeiyong: 0,
                        qitafeiyong: 0,
                        yuguchengben: 0,
                        fahuochengben: 0,
                        jihuochengben: 0,
                        active_amount: 0,
                        recharge_amount: 0,
                        chongzhilv: 0,
                        jihuolv1: 0,
                        jihuolv2: 0,
                        jihuolv3: 0
                      }
                      obj.shuju.forEach(item3 => {
                        obj2.active_amount = obj2.active_amount + item3.active_amount
                        obj2.amount = obj2.amount + item3.amount
                        obj2.deliver_amount = obj2.deliver_amount + item3.deliver_amount
                        obj2.recharge_amount = obj2.recharge_amount + item3.recharge_amount
                        obj2.refund_amount = obj2.refund_amount + item3.refund_amount
                        obj2.submit_amount = obj2.submit_amount + item3.submit_amount
                        obj2.approval_amount = obj2.approval_amount + item3.approval_amount
                        obj2.fail_amount = obj2.fail_amount + item3.fail_amount
                        obj2.approval_fail_amount = obj2.approval_fail_amount + item3.approval_fail_amount

                        obj2.shijijiaoyie = obj2.shijijiaoyie + item3.shijijiaoyie
                        obj2.tuiguangfeiyong = obj2.tuiguangfeiyong + item3.tuiguangfeiyong

                        obj2.qitafeiyong = obj2.qitafeiyong + item3.qitafeiyong
                        obj2.yuguchengben = obj2.yuguchengben + item3.yuguchengben
                        obj2.fahuochengben = obj2.fahuochengben + item3.fahuochengben
                        obj2.jihuochengben = obj2.jihuochengben + item3.jihuochengben


                        // let tongguolv = 0
                        // if(item3.tongguolv != 0){
                        //   tongguolv = item3.tongguolv.split('%')[0]
                        // }
                        // obj2.tongguolv = obj2.tongguolv + (tongguolv/obj.shuju.length)

                        // let tidanlv = 0
                        // if(item3.tidanlv != 0){
                        //   tidanlv = item3.tidanlv.split('%')[0]
                        // }
                        // obj2.tidanlv = obj2.tidanlv + (tidanlv/obj.shuju.length)

                        // let fahuolv = 0
                        // if(item3.fahuolv != 0){
                        //   fahuolv = item3.fahuolv.split('%')[0]
                        // }
                        // obj2.fahuolv = obj2.fahuolv + (fahuolv/obj.shuju.length)

                        // let shengchanshibailv = 0
                        // if(item3.shengchanshibailv != 0){
                        //   shengchanshibailv = item3.shengchanshibailv.split('%')[0]
                        // }
                        // obj2.shengchanshibailv = obj2.shengchanshibailv + (shengchanshibailv/obj.shuju.length)

                        // let chongzhilv = 0
                        // if(item3.chongzhilv != 0){
                        //   chongzhilv = item3.chongzhilv.split('%')[0]
                        // }
                        // obj2.chongzhilv = obj2.chongzhilv + (chongzhilv/obj.shuju.length)



                        // let jihuolv1 = 0
                        // if(item3.jihuolv1 != 0){
                        //   jihuolv1 = item3.jihuolv1.split('%')[0]
                        // }
                        // obj2.jihuolv1 = obj2.jihuolv1 + (jihuolv1/obj.shuju.length)

                        // let jihuolv2 = 0
                        // if(item3.jihuolv2 != 0){
                        //   jihuolv2 = item3.jihuolv2.split('%')[0]
                        // }
                        // obj2.jihuolv2 = obj2.jihuolv2 + (jihuolv2/obj.shuju.length)

                        // let jihuolv3 = 0

                        // if(item3.jihuolv3 != 0){
                        //   jihuolv3 = item3.jihuolv3.split('%')[0]
                        // }
                        // obj2.jihuolv3 = obj2.jihuolv3 + (jihuolv3/obj.shuju.length)

                      })

                      // if(obj2.tongguolv){
                      //   obj2.tongguolv = obj2.tongguolv.toFixed(2) +'%'
                      // }else{
                      //   obj2.tongguolv = "0.00%"
                      // }
                      // if(obj2.chongzhilv){
                      //   obj2.chongzhilv = obj2.chongzhilv.toFixed(2) +'%'
                      // }else{
                      //   obj2.chongzhilv = "0.00%"
                      // }
                      // if(obj2.tidanlv){
                      //   obj2.tidanlv = obj2.tidanlv.toFixed(2) +'%'
                      // }else{
                      //   obj2.tidanlv = "0.00%"
                      // }
                      // if(obj2.fahuolv){
                      //   obj2.fahuolv = obj2.fahuolv.toFixed(2) +'%'
                      // }else{
                      //   obj2.fahuolv = "0.00%"
                      // }
                      // if(obj2.shengchanshibailv){
                      //   obj2.shengchanshibailv = obj2.shengchanshibailv.toFixed(2) +'%'
                      // }else{
                      //   obj2.shengchanshibailv = "0.00%"
                      // }
                      // if(obj2.jihuolv1){
                      //   obj2.jihuolv1 = obj2.jihuolv1.toFixed(2) +'%'
                      // }else{
                      //   obj2.jihuolv1 = "0.00%"
                      // }
                      // if(obj2.jihuolv2){
                      //   obj2.jihuolv2 = obj2.jihuolv2.toFixed(2) +'%'
                      // }else{
                      //   obj2.jihuolv2 = "0.00%"
                      // }
                      // if(obj2.jihuolv3){
                      //   obj2.jihuolv3 = obj2.jihuolv3.toFixed(2) +'%'
                      // }else{
                      //   obj2.jihuolv3 = "0.00%"
                      // }
                      obj.shuju.unshift(obj2)
                    }

                    let hejihang = obj.shuju[0]

                    hejihang.active_amount = parseInt(hejihang.active_amount)
                    hejihang.amount = parseInt(hejihang.amount)
                    hejihang.deliver_amount = parseInt(hejihang.deliver_amount)
                    hejihang.recharge_amount = parseInt(hejihang.recharge_amount)
                    hejihang.submit_amount = parseInt(hejihang.submit_amount)
                    hejihang.approval_amount = parseInt(hejihang.approval_amount)
                    hejihang.fail_amount = parseInt(hejihang.fail_amount)
                    hejihang.approval_fail_amount = parseInt(hejihang.approval_fail_amount)

                    hejihang.shijijiaoyie = parseInt(hejihang.shijijiaoyie)
                    hejihang.tuiguangfeiyong = parseInt(hejihang.tuiguangfeiyong)
                    hejihang.qitafeiyong = parseInt(hejihang.qitafeiyong)
                    hejihang.yuguchengben = parseInt(hejihang.yuguchengben)
                    hejihang.fahuochengben = parseInt(hejihang.fahuochengben)
                    hejihang.jihuochengben = parseInt(hejihang.jihuochengben)
                    hejihang.refund_amount = parseInt(hejihang.refund_amount)

                    if(hejihang.amount != 0){
                      hejihang.tongguolv = ( hejihang.approval_amount /  hejihang.amount * 100).toFixed(2) +'%'
                      hejihang.tidanlv = ( hejihang.submit_amount /  hejihang.amount * 100).toFixed(2) +'%'
                      hejihang.fahuolv = ( hejihang.deliver_amount /  hejihang.amount * 100).toFixed(2) +'%'

                      hejihang.shengchanshibailv = ( (hejihang.fail_amount + hejihang.approval_fail_amount) /  hejihang.amount * 100).toFixed(2) +'%'

                      hejihang.jihuolv1 = ( hejihang.active_amount /  hejihang.amount * 100).toFixed(2) +'%'
                    }else{
                      hejihang.tongguolv = '0.00%'
                      hejihang.tidanlv = '0.00%'
                      hejihang.fahuolv = '0.00%'
                      hejihang.shengchanshibailv = '0.00%'
                      hejihang.jihuolv1 = '0.00%'
                    }

                    if(hejihang.active_amount != 0){
                      hejihang.chongzhilv = ( hejihang.recharge_amount /  hejihang.active_amount * 100).toFixed(2) +'%'
                    }else{
                      hejihang.chongzhilv = '0.00%'
                    }
                    if(hejihang.deliver_amount  != 0){
                      hejihang.jihuolv2 = ( hejihang.active_amount /  hejihang.deliver_amount * 100).toFixed(2) +'%'
                    }else{
                      hejihang.jihuolv2 = '0.00%'
                    }
                    // if(hejihang.active_amount != 0){
                    //   hejihang.jihuolv3 = ( hejihang.refund_amount /  hejihang.active_amount * 100).toFixed(2) +'%'
                    // }else{
                    //   hejihang.jihuolv3 = '0.00%'
                    // }

                    this.list.push(obj)
                  })

                  if(!this.zhibiao2show){
                    let obj = {
                      chanpin: '合计',
                      shuju: [{
                        amount: 0,
                        approval_amount: 0,
                        tongguolv: 0,
                        submit_amount: 0,
                        tidanlv: 0,
                        deliver_amount: 0,
                        fahuolv: 0,
                        fail_amount: 0,
                        approval_fail_amount:0,
                        shengchanshibailv: 0,
                        shijijiaoyie: 0,
                        tuiguangfeiyong: 0,
                        qitafeiyong: 0,
                        yuguchengben: 0,
                        fahuochengben: 0,
                        jihuochengben: 0,
                        active_amount: 0,
                        recharge_amount: 0,
                        chongzhilv: 0,
                        jihuolv1: 0,
                        jihuolv2: 0,
                        jihuolv3: 0,
                      }]
                    }

                    this.list.forEach(item=>{
                      item.shuju.forEach(item2=>{
                          obj.shuju[0].amount = obj.shuju[0].amount + item2.amount
                          obj.shuju[0].active_amount = obj.shuju[0].active_amount + item2.active_amount
                          obj.shuju[0].deliver_amount = obj.shuju[0].deliver_amount + item2.deliver_amount
                          obj.shuju[0].recharge_amount = obj.shuju[0].recharge_amount + item2.recharge_amount
                          obj.shuju[0].refund_amount = obj.shuju[0].refund_amount + item2.refund_amount
                          obj.shuju[0].submit_amount = obj.shuju[0].submit_amount + item2.submit_amount
                          obj.shuju[0].approval_amount = obj.shuju[0].approval_amount + item2.approval_amount
                          obj.shuju[0].fail_amount = obj.shuju[0].fail_amount + item2.fail_amount
                          obj.shuju[0].approval_fail_amount = obj.shuju[0].approval_fail_amount + item2.approval_fail_amount
                          obj.shuju[0].shijijiaoyie = obj.shuju[0].shijijiaoyie + item2.shijijiaoyie
                          obj.shuju[0].tuiguangfeiyong = obj.shuju[0].tuiguangfeiyong + item2.tuiguangfeiyong
                          obj.shuju[0].qitafeiyong = obj.shuju[0].qitafeiyong + item2.qitafeiyong
                          obj.shuju[0].yuguchengben = obj.shuju[0].yuguchengben + item2.yuguchengben
                          obj.shuju[0].fahuochengben = obj.shuju[0].fahuochengben + item2.fahuochengben
                          obj.shuju[0].jihuochengben = obj.shuju[0].jihuochengben + item2.jihuochengben
                      })
                    })

                    console.log(obj.shuju[0])

                    let hejihang = obj.shuju[0]

                    hejihang.active_amount = parseInt(hejihang.active_amount)
                    hejihang.amount = parseInt(hejihang.amount)
                    hejihang.deliver_amount = parseInt(hejihang.deliver_amount)
                    hejihang.recharge_amount = parseInt(hejihang.recharge_amount)
                    hejihang.submit_amount = parseInt(hejihang.submit_amount)
                    hejihang.approval_amount = parseInt(hejihang.approval_amount)
                    hejihang.fail_amount = parseInt(hejihang.fail_amount)
                    hejihang.approval_fail_amount = parseInt(hejihang.approval_fail_amount)

                    hejihang.shijijiaoyie = parseInt(hejihang.shijijiaoyie)
                    hejihang.tuiguangfeiyong = parseInt(hejihang.tuiguangfeiyong)
                    hejihang.qitafeiyong = parseInt(hejihang.qitafeiyong)
                    hejihang.yuguchengben = parseInt(hejihang.yuguchengben)
                    hejihang.fahuochengben = parseInt(hejihang.fahuochengben)
                    hejihang.jihuochengben = parseInt(hejihang.jihuochengben)
                    hejihang.refund_amount = parseInt(hejihang.refund_amount)

                    if(hejihang.amount != 0){
                      hejihang.tongguolv = ( hejihang.approval_amount /  hejihang.amount * 100).toFixed(2) +'%'
                      hejihang.tidanlv = ( hejihang.submit_amount /  hejihang.amount * 100).toFixed(2) +'%'
                      hejihang.fahuolv = ( hejihang.deliver_amount /  hejihang.amount * 100).toFixed(2) +'%'

                      hejihang.shengchanshibailv = ( (hejihang.fail_amount + hejihang.approval_fail_amount) /  hejihang.amount * 100).toFixed(2) +'%'

                      hejihang.jihuolv1 = ( hejihang.active_amount /  hejihang.amount * 100).toFixed(2) +'%'
                    }else{
                      hejihang.tongguolv = '0.00%'
                      hejihang.tidanlv = '0.00%'
                      hejihang.fahuolv = '0.00%'
                      hejihang.shengchanshibailv = '0.00%'
                      hejihang.jihuolv1 = '0.00%'
                    }

                    if(hejihang.active_amount != 0){
                      hejihang.chongzhilv = ( hejihang.recharge_amount /  hejihang.active_amount * 100).toFixed(2) +'%'
                    }else{
                      hejihang.chongzhilv = '0.00%'
                    }
                    if(hejihang.deliver_amount  != 0){
                      hejihang.jihuolv2 = ( hejihang.active_amount /  hejihang.deliver_amount * 100).toFixed(2) +'%'
                    }else{
                      hejihang.jihuolv2 = '0.00%'
                    }

                    this.list.unshift(obj)
                  }
                }else{
                  //没有大类  不会被搜索
                  // let obj = {
                  //   chanpin: '无',
                  //   shuju: []
                  // }
                  // list.forEach(item2 => {

                  //   item2.active_amount = parseInt(item2.active_amount)
                  //   item2.amount = parseInt(item2.amount)
                  //   item2.deliver_amount = parseInt(item2.deliver_amount)
                  //   item2.recharge_amount = parseInt(item2.recharge_amount)
                  //   item2.submit_amount = parseInt(item2.submit_amount)
                  //   item2.approval_amount = parseInt(item2.approval_amount)
                  //   item2.fail_amount = parseInt(item2.fail_amount)
                  //   item2.approval_fail_amount = parseInt(item2.approval_fail_amount)

                  //   item2.shijijiaoyie = parseInt(item2.shijijiaoyie)
                  //   item2.tuiguangfeiyong = parseInt(item2.tuiguangfeiyong)
                  //   item2.qitafeiyong = parseInt(item2.qitafeiyong)
                  //   item2.yuguchengben = parseInt(item2.yuguchengben)
                  //   item2.fahuochengben = parseInt(item2.fahuochengben)
                  //   item2.jihuochengben = parseInt(item2.jihuochengben)

                  //   if(item2.amount != 0){
                  //     item2.tongguolv = ( item2.approval_amount /  item2.amount * 100).toFixed(2) +'%'
                  //     item2.tidanlv = ( item2.submit_amount /  item2.amount * 100).toFixed(2) +'%'
                  //     item2.fahuolv = ( item2.deliver_amount /  item2.amount * 100).toFixed(2) +'%'
                  //     item2.shengchanshibailv = ( (item2.fail_amount + item2.approval_fail_amount) /  item2.amount * 100).toFixed(2) +'%'
                  //     item2.jihuolv1 = ( item2.active_amount /  item2.amount * 100).toFixed(2) +'%'
                  //   }else{
                  //     item2.tongguolv = '0.00%'
                  //     item2.tidanlv = '0.00%'
                  //     item2.fahuolv = '0.00%'
                  //     item2.shengchanshibailv = '0.00%'

                  //     item2.jihuolv1 = '0.00%'
                  //   }
                  //   if(item2.active_amount != 0){
                  //     item2.chongzhilv = ( item2.recharge_amount /  item2.active_amount * 100).toFixed(2) +'%'
                  //   }else{
                  //     item2.chongzhilv = '0.00%'
                  //   }
                  //   if(item2.deliver_amount  != 0){
                  //     item2.jihuolv2 = ( item2.active_amount /  item2.deliver_amount * 100).toFixed(2) +'%'
                  //   }else{
                  //     item2.jihuolv2 = '0.00%'
                  //   }

                  //   if(this.zhibiao2show){
                  //     this.$set(item2,'zhibiao2','无')
                  //   }

                  //   obj.shuju.push(item2)
                  // })
                  // this.list.push(obj)
                }



                //排序
                let paixu = ''
                let shengjiang = 1
                if(this.paixu){
                  paixu = this.paixu.slice(0,this.paixu.length-1)
                  shengjiang = this.paixu.slice(this.paixu.length-1,this.paixu.length)

                  if(shengjiang == 1){
                    //只有一个大类  提出第一个  后面排序  在合起来
                    if(!this.zhibiao2show){
                      let dange = this.list.slice(0,1)
                      let newarr = this.list.slice(1,this.list.length)

                      newarr.sort((a,b)=>{
                        if(paixu == 'tongguolv' || paixu == 'tidanlv' || paixu == 'fahuolv' || paixu == 'shengchanshibailv' || paixu == 'chongzhilv' || paixu == 'jihuolv1' || paixu == 'jihuolv2'){
                          if(b.shuju[0][paixu] == 0){
                            b = 0
                          }else{
                            b = b.shuju[0][paixu].split('%')[0]
                          }
                          if(a.shuju[0][paixu] == 0){
                            a = 0
                          }else{
                            a = a.shuju[0][paixu].split('%')[0]
                          }
                          return b - a
                        }else{
                          return b.shuju[0][paixu] - a.shuju[0][paixu]
                        }
                      })

                      this.list = [...dange,...newarr]
                    }

                    if(this.zhibiao2show){
                      this.list.forEach((item,index)=>{
                        //2个大类  提出每个组的第一个  后面排序  在合起来  最后总排序
                        let dange = JSON.parse(JSON.stringify(item.shuju.slice(0,1)))

                        let newarr = JSON.parse(JSON.stringify(item.shuju.slice(1,item.shuju.length)))

                        newarr.sort((a,b)=>{
                          if(paixu == 'tongguolv' || paixu == 'tidanlv' || paixu == 'fahuolv' || paixu == 'shengchanshibailv' || paixu == 'chongzhilv' || paixu == 'jihuolv1' || paixu == 'jihuolv2'){
                            if(b[paixu] == 0){
                              b = 0
                            }else{
                              b = b[paixu].split('%')[0]
                            }
                            if(a[paixu] == 0){
                              a = 0
                            }else{
                              a = a[paixu].split('%')[0]
                            }
                            return b - a
                          }else{
                            return b[paixu] - a[paixu]
                          }
                        })
                        this.$set(this.list[index],'shuju',[...dange,...newarr])

                      })

                      this.list.sort((a,b)=>{
                        if(paixu == 'tongguolv' || paixu == 'tidanlv' || paixu == 'fahuolv' || paixu == 'shengchanshibailv' || paixu == 'chongzhilv' || paixu == 'jihuolv1' || paixu == 'jihuolv2'){
                          if(b.shuju[0][paixu] == 0){
                            b = 0
                          }else{
                            b = b.shuju[0][paixu].split('%')[0]
                          }
                          if(a.shuju[0][paixu] == 0){
                            a = 0
                          }else{
                            a = a.shuju[0][paixu].split('%')[0]
                          }
                          return b - a
                        }else{
                          return b.shuju[0][paixu] - a.shuju[0][paixu]
                        }
                      })

                    }



                  }
                  //排序上
                  if(shengjiang == 2){

                    if(!this.zhibiao2show){
                      let dange = this.list.slice(0,1)
                      let newarr = this.list.slice(1,this.list.length)

                      newarr.sort((a,b)=>{
                        if(paixu == 'tongguolv' || paixu == 'tidanlv' || paixu == 'fahuolv' || paixu == 'shengchanshibailv' || paixu == 'chongzhilv' || paixu == 'jihuolv1' || paixu == 'jihuolv2'){
                          if(b.shuju[0][paixu] == 0){
                            b = 0
                          }else{
                            b = b.shuju[0][paixu].split('%')[0]
                          }
                          if(a.shuju[0][paixu] == 0){
                            a = 0
                          }else{
                            a = a.shuju[0][paixu].split('%')[0]
                          }
                          return a - b
                        }else{
                          return a.shuju[0][paixu] - b.shuju[0][paixu]
                        }
                      })

                      this.list = [...dange,...newarr]
                    }

                    if(this.zhibiao2show){
                      this.list.forEach((item,index)=>{
                        //2个大类  提出每个组的第一个  后面排序  在合起来  最后总排序
                        let dange = JSON.parse(JSON.stringify(item.shuju.slice(0,1)))

                        let newarr = JSON.parse(JSON.stringify(item.shuju.slice(1,item.shuju.length)))

                        newarr.sort((a,b)=>{
                          if(paixu == 'tongguolv' || paixu == 'tidanlv' || paixu == 'fahuolv' || paixu == 'shengchanshibailv' || paixu == 'chongzhilv' || paixu == 'jihuolv1' || paixu == 'jihuolv2'){
                            if(b[paixu] == 0){
                              b = 0
                            }else{
                              b = b[paixu].split('%')[0]
                            }
                            if(a[paixu] == 0){
                              a = 0
                            }else{
                              a = a[paixu].split('%')[0]
                            }
                            return a - b
                          }else{
                            return a[paixu] - b[paixu]
                          }
                        })
                        this.$set(this.list[index],'shuju',[...dange,...newarr])

                      })
                      this.list.sort((a,b)=>{
                        if(paixu == 'tongguolv' || paixu == 'tidanlv' || paixu == 'fahuolv' || paixu == 'shengchanshibailv' || paixu == 'chongzhilv' || paixu == 'jihuolv1' || paixu == 'jihuolv2'){
                          if(b.shuju[0][paixu] == 0){
                            b = 0
                          }else{
                            b = b.shuju[0][paixu].split('%')[0]
                          }
                          if(a.shuju[0][paixu] == 0){
                            a = 0
                          }else{
                            a = a.shuju[0][paixu].split('%')[0]
                          }
                          return b - a
                        }else{
                          return b.shuju[0][paixu] - a.shuju[0][paixu]
                        }
                      })

                    }

                    // this.list.sort((a,b)=>{
                    //   if(paixu == 'tongguolv' || paixu == 'tidanlv' || paixu == 'fahuolv' || paixu == 'shengchanshibailv' || paixu == 'chongzhilv' || paixu == 'jihuolv1' || paixu == 'jihuolv2'){
                    //     if(b.shuju[0][paixu] == 0){
                    //       b = 0
                    //     }else{
                    //       b = b.shuju[0][paixu].split('%')[0]
                    //     }
                    //     if(a.shuju[0][paixu] == 0){
                    //       a = 0
                    //     }else{
                    //       a = a.shuju[0][paixu].split('%')[0]
                    //     }
                    //     return a - b
                    //   }else{
                    //     return  a.shuju[0][paixu] - b.shuju[0][paixu]
                    //   }
                    // })
                  }
                }
              }

              this.jiazaizhong = false
              // if (list != '' && !list[0].product_id) {

              // }


            } else {
              this.jiazaizhong = false
              this.$message.error(response.data.msg.info);
            }
          })
      },

      getxiaoshouqudaolist: function(id) {
        axios.get('/api/form/sources?page_size=1000&channel_id='+id)
          .then(response => {
            if (response.data.msg.code == 0) {
              this.xiaoshouqudaolists = response.data.data.data
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },



      change4:function(){

        this.all.sources = []
        this.sourceslists = []
        this.getgezhonglist3()

        this.all.sub_sources = []
        this.getgezhonglist4()
      },
      getgezhonglist3:function(){
        //获取订单来源
        axios.get('/api/form/channel/sources?channel_ids='+this.all.channel_ids)
          .then(response => {
            if (response.data.msg.code == 0) {
               this.sourceslists = response.data.data
            } else {
               this.$message.error(response.data.msg.info);
            }
        })
      },
      change3:function(){
        this.all.page_ids = []
        this.shoplists = []
        this.getgezhonglist2()
      },
      getgezhonglist2:function(){
        //获取商品
        axios.get('/api/gth/order-pages2?status=100&_page_size=2000&product_ids='+this.all.product_ids+'&parent_shop_ids='+this.all.supplier_ids)
          .then(response => {
            if (response.data.msg.code == 0) {
              this.shoplists = response.data.data.data
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
       change2:function(){
         this.all.product_sources = []
         this.all.product_ids = []
         this.prolists = []
         this.all.page_ids = []
         this.shoplists = []
         this.getgezhonglist2()
       },
      change1:function(){
        this.all.supplier_ids = []
        this.all.product_ids = []
        this.prolists = []
        this.all.page_ids = []
        this.shoplists = []
        this.getgezhonglist1()
      },
      getgezhonglist1:function(){
        //获取全部基础产品
        axios.get('/api/gth/products/list?page_size=2000&product_sources='+this.all.product_sources)
          .then(response => {
            if (response.data.msg.code == 0) {
              this.prolists = response.data.data.data
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },

      ///获取二级来源
      getgezhonglist4:function(){
        axios.get('/api/plan-market/sub-source/list?source='+this.all.sources)
          .then(response => {
            if (response.data.msg.code == 0) {
              this.erjilists = response.data.data
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
        //获取二级来源
        // axios.get('/api/gth/order-pages2?status=100&_page_size=2000&product_ids='+this.all.product_ids+'&parent_shop_ids='+this.all.supplier_ids)
        //   .then(response => {
        //     if (response.data.msg.code == 0) {
        //       this.shoplists = response.data.data.data
        //     } else {
        //       this.$message.error(response.data.msg.info);
        //     }
        //   })
      },
      getgezhonglist: function() {
        //获取全部分销商
        axios.get('/api/gth/partner/list?page_size=2000')
          .then(response => {
            if (response.data.msg.code == 0) {
              this.fenxiaoshanglists = response.data.data.data
            } else {
              this.$message.error(response.data.msg.info);
            }
          })

        //获取供应商
        axios.get('/api/gth/supplier/list?page_size=2000')
          .then(response => {
            if (response.data.msg.code == 0) {
              this.gongyingshanglists = response.data.data.data
            } else {
              this.$message.error(response.data.msg.info);
            }
          })

        //获取销售渠道
        axios.get('/api/form/channels?page_size=2000')
          .then(response => {
            if (response.data.msg.code == 0) {
              this.qudaolists = response.data.data.data
            } else {
              this.$message.error(response.data.msg.info);
            }
          })


        //获取运营商渠道
        axios.get('/api/plan-market/product/sources?page_size=2000')
          .then(response => {
            if (response.data.msg.code == 0) {
               this.qudaolaiyuanlists = response.data.data
            } else {
               this.$message.error(response.data.msg.info);
            }
        })

        //获取客户经理
        axios.get('/api/plan-market/user/userManagerList')
          .then(response => {
            if (response.data.msg.code == 0) {
               this.kehujinglilists = response.data.data
            } else {
               this.$message.error(response.data.msg.info);
            }
        })

      }
    }
  }
</script>

<style lang="scss" scoped>
  /deep/ .el-button--danger {
      color: #FFF;
      background-color: #2974FF;
      border-color: #2974FF;
  }
  /deep/ .el-button--danger.is-plain {
      color: #18A0FB !important;
      background: #EEF7FF !important;
      border-color: #18A0FB !important;
  }
  .index {
    background: #F4F4F4;
    /deep/ .el-button--medium{ margin-bottom: 10px;}
    .shangqu{position: fixed; top: 0; background: #fff !important; z-index: 999;}

    // ::-webkit-scrollbar {
    // /*滚动条整体样式*/
    // width : 0px;  /*高宽分别对应横竖滚动条的尺寸*/
    // height: 0px;
    // }
    // ::-webkit-scrollbar-thumb {
    // /*滚动条里面小方块*/
    // border-radius: 0px;
    // box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
    // background   : #535353;
    // }
    // ::-webkit-scrollbar-track {
    // /*滚动条里面轨道*/
    // box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
    // border-radius: 0px;
    // background   : #ededed;
    // }

    .gdt::-webkit-scrollbar {
    /*滚动条整体样式*/
    width : 0px;  /*高宽分别对应横竖滚动条的尺寸*/
    height: 0px;
    }
    .gdt::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 0px;
    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
    background   : #535353;
    }
    .gdt::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 0px;
    background   : #ededed;
    }

    // .right{
    //   /* 设置滚动条的样式 */
    //   ::-webkit-scrollbar {
    //     width: 15px;
    //   }

    //   /* 滚动槽 */
    //   ::-webkit-scrollbar-track {
    //     -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
    //     border-radius: 15px;
    //   }

    //   /* 滚动条滑块 */
    //   ::-webkit-scrollbar-thumb {
    //     border-radius: 15px;
    //     background: rgba(0, 0, 0, 0.1);
    //     -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
    //   }

    //   ::-webkit-scrollbar-thumb:window-inactive {
    //     background: rgba(0, 0, 0, 0.1);
    //   }
    // }

    /deep/ .el-select__tags{ overflow: hidden;}
    .bli{ padding: 20px 35px; color:rgb(123, 134, 153); font-size: 16px; cursor: pointer;}
    .bliact{ background: #fff !important; color: #333 !important;}
    .navkli{ padding:10px 15px; cursor: pointer;  background: rgb(238, 247, 255); border: 1px solid rgb(64, 155, 250); color: rgb(12, 131, 255);}
    .navkliact{ }
    .zhibiao1x{
      /deep/ .el-input{width: 250px;}
      /deep/ .el-input__inner{ background: #fffaf1 !important; border: 1px solid #ffdea9; }
    }
    .zhibiao2x{
      /deep/ .el-input{width: 250px;}
      /deep/ .el-input__inner{ background: #f7ffff !important; border: 1px solid #a2e3e9; }
    }
    .f1{text-align: right; font-size: 14px;}
    .f2{font-size: 14px;}
    .lan{ color: #409EFF;}
    .tou{width: calc(100% - 200px) !important;}
    .zhge{ background: rgb(238, 247, 255); border: 1px solid rgb(64, 155, 250); color: rgb(12, 131, 255);}
    .zhge2{ background: #fef0f0 !important; border: 1px solid #F56C6C !important; color: #F56C6C !important;}
    /deep/ .el-input{ width: 250px;}
    .inp20{
      /deep/ .el-input{  margin: 10px 20px 10px 0;}
    }
    .heji{ font-weight: bold;}
    * {
      box-sizing: border-box;
    }
      .lieall{

      }
      .zhibiao1{ width: 150px;  min-height: 40px; display: flex; align-items: center; justify-content: center; background: rgb(255, 250, 241); position: relative; border: 1px #ddd solid; margin-top: -1px; padding:0 10px;
          font-size: 14px
          // &::after {
          //     position: absolute;
          //     content: "";
          //     left:0px;
          //     top:0px;
          //     width: 200%;
          //     height: 200%;
          //     border: 1px solid rgb(255, 222, 169);
          //     transform-origin: 0 0;
          //     transform: scale(0.5);
          // }
      }

      .zhibiao2{ background: rgb(247, 255, 255);  position: relative; border: 1px #ddd solid;
          // &::after {
          //     position: absolute;
          //     content: "";
          //     left:0px;
          //     top:0px;
          //     width: 200%;
          //     height: 200%;
          //     border: 1px solid rgb(162, 227, 233);
          //     transform-origin: 0 0;
          //     transform: scale(0.5);
          // }
      }
        .liebiao2 {
          display: flex;
          font-size: 14px;
          color: rgb(86, 86, 86);
          // &::after {
          //     position: absolute;
          //     content: "";
          //     left:0px;
          //     top:0px;
          //     width: 200%;
          //     height: 200%;
          //     border: 1px solid #ddd;
          //     transform-origin: 0 0;
          //     transform: scale(0.5);
          // }
        }

        .liebiao {
          display: flex;
          font-size: 14px;
          color: rgb(86, 86, 86);
          // &::after {
          //     position: absolute;
          //     content: "";
          //     left:0px;
          //     top:0px;
          //     width: 200%;
          //     height: 200%;
          //     border: 1px solid #ddd;
          //     transform-origin: 0 0;
          //     transform: scale(0.5);
          // }
        }
        .gdt .liebiaoli { margin-top: 0;}
        .liebiaoli {
          flex: 1;
          line-height: 40px;
          text-align: center; position: relative;
          border: 1px #ddd solid;
          margin-left: -1px;
          margin-top: -1px;

          &:first-child{

          }

          // &::after {
          //     position: absolute;
          //     content: "";
          //     left:0px;
          //     top:0px;
          //     width: 200%;
          //     height: 200%;
          //     border: 1px solid #ddd;
          //     transform-origin: 0 0;
          //     transform: scale(0.5);
          // }
        }

  }
</style>
